<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-10-09 14:46:32
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-10-09 15:17:17
 * @FilePath: \vue-project\src\components\UploadFile.vue
 * @Description: 
 * 
-->
<template>
  <div>
    <a-upload
      :onBeforeUpload="beforeUpload"
      :accept="uploadConfig.accept"
      :multiple="uploadConfig.multiple"
      :limit="uploadConfig.limit"
      :name="uploadConfig.name"
      :list-type="uploadConfig.pictureCard"
      @success="uploadSuccess"
      @error="uploadError"
    >
      <img v-if="imageUrl" :src="imageUrl" />
      <div v-else-if="uploadConfig.pictureCard == 'picture-card'" class="avatar-uploader-icon">
        <span class="iconfont icon-shangchuan"></span>
      </div>
      <a-button v-else type="primary"
        ><span class="iconfont icon-shangchuan"></span> &nbsp;&nbsp;&nbsp;&nbsp;上传文件</a-button
      >
    </a-upload>
    <!-- 图片裁剪组件 -->
    <ImgCorpper
      :visible="isShowCorpper"
      :image="selectPic"
      @close="hideCorpper"
      :isCompress="true"
    />
  </div>
</template>

<script setup>
import { uploadImageActioc, editorUpload } from '@/api/system'
import { useUserStore } from '@/stores'
import ImgCorpper from './ImgCorpper.vue'
import { ref } from 'vue'

let saveFile = ref()
let imageUrl = ref('')
let selectPic = ref('')
let isShowCorpper = ref(false)

const props = defineProps({
  uploadConfig: {
    type: Object,
    default: {
      width: '100px',
      height: '100px',
      imageUrl: '',
      pictureCard: '',
      data: {},
      accept: 'image/png,image/jpg,image/jpeg',
      multiple: false,
      limit: 1,
      name: 'url'
    }
  }
})

const userStore = useUserStore()

const emits = defineEmits(['uploadSuccess'])

//文件上传成功时的钩子
const uploadSuccess = (response) => {
  emits('uploadSuccess', response.response)
}
//上传失败
const uploadError = (file) => {
  Message.error(file.response.msg)
}

const beforeUpload = (file) => {
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    selectPic.value = String(reader.result)
    isShowCorpper.value = true
  }
  return false
}

const hideCorpper = (data) => {
  isShowCorpper.value = false
  if (data) {
    const {
      result: { dataURL, blobURL },
      file
    } = data
    imageUrl.value = dataURL
    console.log(file)
  }
}
</script>

<style lang="scss" scoped></style>
